javascript - javascript在textarea和div中同时选择并突出显示2个块中的文本

Question

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>

现在仅在您选择时突出显示，需要同时突出显示

谢谢你

标签： javascripthtmljquerycss

Answer 1

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>