【发布时间】：2018-08-07 22:18:54
【问题描述】：
我正在为纯 HTML 编写（动态）RegEx 解析器以提取值。为了显示当前的 RegEx 结果，我想显示以当前结果突出显示的 HTML 代码。
我在变量中有 HTML 代码，我的 RegEx 匹配函数返回当前结果和结果的索引。
因此，我在找到的字符串的位置注入了一个<span class="highlight">，并在匹配长度后用</span>关闭它。
我目前的问题是： 如果我使用 element.text(newtext) 设置元素，则不会解析我注入的 HTML。
另一方面，如果我使用 element.html(newtext) 设置元素，则完整的 HTML 将被解析并可能被破坏。
如果我先转义不被解析的HTML标签，原始html的RegEx.match的索引不等于转义的html，因此注入位置错误。
有没有一种很好的方法可以将 html 代码作为纯文本处理，但是使用索引将突出显示的 html 注入到正确的位置？
示例
想想 完整的 html 源代码 - 这是我的气象站的单行 sn-p：
<td bgcolor="#EDEFEF"><input name="inHumi" disabled="disabled" type="text" value="63" /></td>
用户输入匹配value=" 的正则表达式，因此value=" 应在html 字符串中突出显示。
示例代码
JS 代码如下所示。认为所有设置的变量都是用户在 HTML 表单中定义的，因此用户输入 RegEx 和 HTML 源代码作为文本，并且 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 源代码。
【问题讨论】：
-
请用您的 JS 和 HTML 发布 minimal reproducible example
-
这个问题的“并且可能损坏”部分可以使用一些额外的解释，是的；也不清楚为什么要在索引点而不是特定的 DOM 节点处注入 html，或者为什么要尝试转义 html 而不是渲染它，包括添加的跨度。 （如果问题是您的正则表达式有时会匹配部分 HTML 标记或属性，您会希望将其限制为仅处理文本节点而不是整个文档。）您能否整理一个简化示例来演示麻烦是？
标签： javascript jquery css