问突出显示JS中的纯html

EN

我正在为普通的超文本标记语言编写一个(动态) RegEx解析器来提取值。为了显示当前的RegEx结果，我想显示用当前结果突出显示的代码。

我将HTML代码放在一个变量中，RegEx match函数返回当前结果和结果的索引。

因此，我在找到的字符串位置注入了一个<span class="highlight">，并在匹配长度结束后使用</span>将其关闭。

我现在的问题是:如果我用element.text(newtext)设置元素，我注入的超文本标记语言就不能被解析。

另一方面，如果我用element.html(newtext)设置元素，那么整个HTML就会被解析，甚至可能会被破坏。

如果我首先转义不被解析的HTML标记，原始html的RegEx.match的索引不等于转义的html，因此注入在错误的位置。

有没有一种很好的方法可以将html代码作为纯文本处理，但是使用索引将高亮显示的html注入到正确的位置？

示例

想一想完整的html源代码-这是我的气象站的一行代码片段：<td bgcolor="#EDEFEF"><input name="inHumi" disabled="disabled" type="text" value="63" /></td>用户输入匹配value="的RegEx，因此value="应该在html字符串中突出显示。

示例代码

JS代码如下所示。考虑到所有设置的变量都是在超文本标记语言表单中由用户定义的，因此用户以文本形式输入RegEx和超文本标记语言源代码，并且RegEx匹配应该在该表单中可见。var rawhtml = '<td bgcolor="#EDEFEF"><input name="inHumi" disabled="disabled" type="text" value="63" /></td>'; var regex = 'value=\"'; var result = rawhtml.match(regex); var result_string = result[0]; var result_index = result.index; $("#visiblehtml").html(rawhtml.substring(0, result_index) + "<span class='highlight'>" + rawhtml.substring(index, index + result_string.length) + "</span>" + rawhtml.substring(index + result_string.length));如果在输入域的中间插入此跨度，html将断开。此外，使用.html设置元素将解析并显示完整的rawhtml，而不是rawhtml源代码。