js正则表达式 html,Javascript正则表达式替换html属性中的文本NOT

我就是我 2022-10-05 11:59 207阅读 0赞

HTML太复杂,无法用正则表达式可靠地解析.

如果你想要做这个客户端,你可以创建一个文档片段和/或断开的DOM节点(这两个都不显示在任何地方),并用HTML字符串初始化,然后遍历所生成的DOM树并处理文本节点. (或者使用图书馆来帮助你,尽管它实际上很简单.)

这是一个DOM行走的例子.这个例子比你的问题稍微简单一点,因为它只是更新文本,它不会向结构添加新的元素(包含文本的部分包括更新结构),但它应该让你走.关于你最终需要改变的内容.

var html =

"

This is a test.

" +

"

" +

"

Testing here too

";

var frag = document.createDocumentFragment();

var body = document.createElement('body');

var node,next;

// Turn the HTML string into a DOM tree

body.innerHTML = html;

// Walk the dom looking for the given text in text nodes

walk(body);

// Insert the result into the current document via a fragment

node = body.firstChild;

while (node) \{

next = node.nextSibling;

frag.appendChild(node);

node = next;

\}

document.body.appendChild(frag);

// Our walker function

function walk(node) \{

var child,next;

switch (node.nodeType) \{

case 1: // Element

case 9: // Document

case 11: // Document fragment

child = node.firstChild;

while (child) \{

next = child.nextSibling;

walk(child);

child = next;

\}

break;

case 3: // Text node

handleText(node);

break;

\}

\}

function handleText(textNode) \{

textNode.nodeValue = textNode.nodeValue.replace(/test/gi,"TEST");

\}

您需要做的更改将在handleText中.具体而言,您不需要更新nodeValue,您需要：

>查找nodeValue字符串中每个单词开头的索引.

>使用Node\#splitText将文本节点分割为最多三个文本节点(匹配文本之前的部分,匹配文本的部分以及匹配文本后面的部分).

>使用document.createElement创建新的跨度(这是字面上只是span = document.createElement(‘span’)).

>使用Node\#insertBefore在第三个文本节点前面插入新的范围(包含匹配文本后面的文本);没有必要创建第三个节点,因为匹配的文本位于文本节点的末尾,只传入null作为refChild.

>使用Node\#appendChild将第二个文本节点(具有匹配文本的文本)移动到span中. (不需要先从父进程中删除它; appendChild会为你做)

发表评论取消回复

表情：

评论列表（有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关 sublime正则表达式替换

![这里写图片描述][SouthEast] 目标：在这些大写缩写（用`([A-Z]+:)`正则表达式选出）前加一个换行符, 实现每个缩写都独立在一行。实现方法：使用 S

绝地灬酷狼/ 2023年01月04日 10:18/ 0 赞/ 443 阅读

相关 js正则表达式 html,Javascript正则表达式替换html属性中的文本NOT

HTML太复杂,无法用正则表达式可靠地解析. 如果你想要做这个客户端,你可以创建一个文档片段和/或断开的DOM节点(这两个都不显示在任何地方),并用HTML字符串初始化,然后

我就是我/ 2022年10月05日 11:59/ 0 赞/ 208 阅读

相关正则表达式查找替换

1 项目描述在文本中查找替换对应的字符串，功能如下： thisisbefore(self ,func) 替换成thisisafter(func,self). 2详

待我称王封你为后i/ 2022年07月21日 01:59/ 0 赞/ 273 阅读

相关 js正则表达式

<script type="text/javascript"> function checkPhone1(str) \{ var

清疚/ 2022年07月12日 11:29/ 0 赞/ 292 阅读

相关 16. Perl 正则表达式-正则替换

正则表达式除了判断字符串是否匹配某个模式之外，也可以将匹配到的字符串进行替换. 1. 正则替换语法默认正则表达式只替换一次默认正则表达式返回替换的次数

逃离我推掉我的手/ 2022年01月29日 18:04/ 0 赞/ 708 阅读

相关正则表达式 replace()替换

定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。语法 stringObjec

迷南。/ 2021年10月24日 01:40/ 0 赞/ 484 阅读

相关 JS正则表达式

JS正则表达式一、什么是正则表达式二、用法 1.通过RegExp对象来创建 2.字面量创建 3.检测字符串

我会带着你远行/ 2021年09月07日 06:10/ 0 赞/ 503 阅读

相关 python 正则表达式查找替换文本

对于简单的文本模式，使用str.replace()即可。例如： text='mark ，帅哥，18，183 帅，mark' print(text.repl

比眉伴天荒/ 2021年09月01日 05:58/ 0 赞/ 393 阅读

相关 js正则表达式

字符串方法: split() 根据匹配字符串切割父字符串，返回切割后的数组。 // 参数：切割字符返回值数组 var str = "aj

一时失言乱红尘/ 2021年09月01日 04:04/ 0 赞/ 605 阅读

相关 js正则表达式

创建字面量创建方式实例创建方式 var reg = /pattern/flags // 字面量创建方式 var reg = ne

ゝ一纸荒年。/ 2021年07月05日 01:26/ 0 赞/ 562 阅读