Question

我的DOM文档包含文本内容，如：

<p>Content scripts aren't completely cut off from their parent extensions. A content script can exchange messages with its parent extension</p>

当我点击这个HTML（文本）时，我将nodeValue作为文本。但是，我可以仅通过点击获得文本中的符号吗？

例如，我点击文字中的符号s：

<p>They support then</p>

Answer 1

所以当一个人想要对单个字符进行操作时，这是一个相当简单的模式，但你有段落或单词块的数据。要做的第一件事就是迭代所有段落，如下所示：

var paras = document.querySelectorAll('p');
for (var i = 0; i < paras.length; i++) {
    var para = paras[i];

    var text = para.textContent;
    var split = para.split('');
    var newText = '';
    for (var j = 0; j < split.length; j++) {
        newText += '<span class="char">' + split[j] + '</span>';
    }

    para.innerHTML = newText;
}

然后，您需要在主体或每个段落上设置单击侦听器，并且事件（通过单击其中一个单字符跨度生成）将包含该特定字符的所有位置信息。

 document.body.addEventListener('click', function(e) {
     if (e.target.classList.contains('char')) {
          console.log(e.clientLeft, e.clientTop);
     }
 });

这种方法优于Selection.focusNode的一个可能的优点是它还允许将单个字符修改为元素，而不仅仅是确定。

请注意，这将破坏事件和对象引用 - 如果您需要保留它们，请使用jQuery＆＃39; s replaceWith之类的内容并迭代文本节点。

点击后我可以从字符串中获取一个符号吗？

1 个答案: