Question

我有contenteditable div，想知道关于html代码输入的字符索引。
例如：

<div id="editableDiv" contenteditable="true">
    the @twitter
</div>

句子的格式如下： @twitter
我可以使用下面的函数计算句子中的字符串位置。这是在@键入（开始索引）和space bar键向下（结束索引-1）

上调用的

getCaretPosition : function(){
       var element = document.getElementById("editableDiv");
       var caretOffset = 0;
       if (typeof window.getSelection != "undefined") {
            var range = window.getSelection().getRangeAt(0);
            var preCaretRange = range.cloneRange();
            preCaretRange.selectNodeContents(element);
            preCaretRange.setEnd(range.endContainer, range.endOffset);
            caretOffset = preCaretRange.toString().length;
        } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
            var textRange = document.selection.createRange();
            var preCaretTextRange = document.body.createTextRange();
            preCaretTextRange.moveToElementText(element);
            preCaretTextRange.setEndPoint("EndToEnd", textRange);
            caretOffset = preCaretTextRange.text.length;
        }
        return caretOffset;
    }

在上面的句子中， @twitter 一词的开始索引为5，结束索引为12。

我现在想从div editableDiv的innerHTML获取相同单词的索引。

InnerHTML：<b>the</b> @twitter
输入索引@twitter：（5,12）
输出 - ＆gt;
开始指数：12
结束指数：19

Answer 1

啊......您可以使用RegEx执行此操作，或将数据拆分为数组并进行分析。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Bla!</title>
        <script type='text/javascript'>
            function boldBeforeWord(word) {
                var txt = document.getElementById('divContent').innerHTML
                var txtArray = txt.split(' ');
                for (var i=1; i< txtArray.length; i++) {
                    if (word ==  txtArray[i].trim()) {
                        txtArray[i-1] = "<b>" + txtArray[i-1] + "</b>";
                    } else {
                        console.log (txtArray[i]);
                    }
                }
                document.getElementById('divContent').innerHTML = txtArray.join (' ');
            }
        </script>
    </head>
    <body>
        <div id='divContent'>
            This is div with content.  I'll try to parse it's content, add bold to any word before @guy <br>
            Is this helpfull? I'm asking as @guy
        </div>
        <button onclick = 'boldBeforeWord("@guy");'> Click to bold </button>
    </body>
</html>

在示例中，我只是简单地将其用于所有单词，但您可以使用“indexOf”来确保您在数组内的正确位置。

Answer 2

答案很明显：文字不包含html标签。

您可以在此处找到完整答案：CodeProject: Get position of word from html code given its starting and end index calculated from normal text

根据从普通文本计算的起始和结束索引，从html代码获取单词的位置

2 个答案: