javascript在textarea和div中同時選擇并突出顯示2個塊中的文本

javascript選擇并突出顯示其中一個塊中的文本并同時突出顯示textarea和div中的文本

<div id="preview"></div>

當您在 textarea 中選擇文本時

我的目標是當您在 textarea 或 div 塊中選擇文本時

同時顯示兩本書中突出顯示的文本

這是需要看的

這是我的代碼

function showPreview()
{
  var value = $('textarea').val().trim();
  value = value.replace("<", "&lt;");
  value = value.replace(">", "&gt;");
  $('#preview').html(value);
}

::-moz-selection { /* Code for Firefox */
  color: red;
  background: yellow;
}

::selection {
  color: red;
  background: yellow;
}

#preview { width:410px; 
border: solid 1px #999; padding:5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea   rows="10" cols="50" onInput="showPreview();">
  product noun
Save Word
To save this word, you'll need to log in.

Log In 
prod·?uct | \ ?pr?-(?)d?kt  \
Definition of product
1: the number or expression resulting from the multiplication together of two or more numbers or expressions
2a(1): something produced
especially : COMMODITY sense 1
(2): something (such as a service) that is marketed or sold as a commodity
b: something resulting from or necessarily following from a set of conditions
a product of his environment
3: the amount, quantity, or total produced
4: CONJUNCTION sense 5
</textarea>
<br/>
<hr/>
<div id="preview">
</div>

現在僅在您選擇時突出顯示，需要同時突出顯示

謝謝你

uj5u.com熱心網友回復：

這是一個非常基本的例子：

const preview = document.querySelector("#preview");

function getSelectionText() {
  var text = "";
  if (window.getSelection) {
    text = window.getSelection().toString();
  } else if (document.selection && document.selection.type != "Control") {
    text = document.selection.createRange().text;
  }
  return text;
}

document.addEventListener("click", () => {
  const selectedText = getSelectionText();
  if (selectedText !== "") {
    preview.innerHTML = preview.innerHTML.replaceAll(
      selectedText,
      `<mark>${selectedText}</mark>`
    );
  }
});

function showPreview() {
  let value = document.querySelector("textarea").value.trim();
  value = value.replace("<", "&lt;");
  value = value.replace(">", "&gt;");
  preview.innerHTML = value;
}

::-moz-selection {
  /* Code for Firefox */
  color: red;
  background: yellow;
}

::selection {
  color: red;
  background: yellow;
}

#preview {
  width: 410px;
  border: solid 1px #999;
  padding: 5px;
}

<textarea rows="10" cols="50" onInput="showPreview();">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</textarea>
<br />
<hr />
<div id="preview"></div>

uj5u.com熱心網友回復：

let textarea = document.querySelector('textarea');
let target = document.querySelector('#preview');
let plainLine = '\n';
let htmlLine = '<br/>';
let pressed = false;

function textToHtml(text) {
    return text.replace(new RegExp(plainLine, 'g'), htmlLine).replace(/\s\s/g, '&nbsp;&nbsp;').replace(/^\s/g, '&nbsp;');
}

function htmlToText(html) {
    html = html.replace(new RegExp(htmlLine, 'g'), plainLine);
    return $('<div>').html(html).text();
}

function highlight(text, from, to) {
    let mark = text.slice(from, to);
    if (mark) mark = `<mark>${mark}</mark>`;
    return text.slice(0, from)   mark   text.slice(to);
}

function showPreview() {
    let from = textarea.selectionStart;
    let to = textarea.selectionEnd;
    let content = highlight(textarea.value, from, to);
    target.innerHTML = textToHtml(content);
}

$(textarea).on({
    mousedown: () => pressed = true,
    mouseup: () => pressed = false,
    mousemove: () => pressed && showPreview(),
    click: () => showPreview(),
    blur: () => showPreview()
});

showPreview();

::-moz-selection { /* Code for Firefox */
  color: red;
  background: yellow;
}

::selection {
  color: red;
  background: yellow;
}

#preview {
    width: 410px;
    border: solid 1px #999;
    padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea   rows="10" cols="50" onInput="showPreview();">
  product noun
Save Word
To save this word, you'll need to log in.

Log In 
prod·?uct | \ ?pr?-(?)d?kt  \
Definition of product
1: the number or expression resulting from the multiplication together of two or more numbers or expressions
2a(1): something produced
especially : COMMODITY sense 1
(2): something (such as a service) that is marketed or sold as a commodity
b: something resulting from or necessarily following from a set of conditions
a product of his environment
3: the amount, quantity, or total produced
4: CONJUNCTION sense 5
</textarea>
<br/>
<hr/>
<div id="preview">
</div>

標籤：javascript html 查询 css

上一篇：聚合桶的總doc_count有可能大于總hit值嗎？

下一篇：jquery語法錯誤，當類名加密并包含特殊字符時無法識別的運算式