javascript - 如何使用正则表达式和 javascript 在字符串中找到匹配的字符串?

标签 javascript regex reactjs

我试图匹配字符串中的模式并获取匹配子字符串的一部分。

我想做什么?

考虑字符串

I am <user-name id="3" text="myname lname"/> <user-name id="32" text="name1 name2"/> 

我要匹配字符串

<user-name id="3" text="myname lname"/>
<user-name id="32" text="name1 name2"/>

并获取文本属性的值。

所以从上面匹配的子字符串我想要值“myname lname”和“name1 name2”

我想从原始字符串中提取这些值并创建如下字符串,

"I am myname lname name1 name2"

文本属性的值也应该是粗体

所以最终的字符串应该如下所示,

I am <strong>myname lname</strong> <strong>name1 name2</strong>

我尝试过什么?

由于我是刚开始使用正则表达式,所以我试着一步一步来。

所以我开始先匹配下面的模式

let str1 = str.match(/\<(user-name\sid="\d+"\stext=[\w\s]+)\/>/g);

但这给了我空。我不确定如何获得最终输出。

最佳答案

不建议使用正则表达式解析 HTML 或标签。我认为这是一个更好的方法 - 假设文本以文本开头,其余为用户名标签

const str = `I am <user-name id="3" text="myname lname"/> <user-name id="32" text="name1 name2"/>`

let domFragment = document.createElement("div");

domFragment.innerHTML=str;

let text = [domFragment.firstChild.wholeText];

[...domFragment.querySelectorAll("user-name")].forEach(
  ele => text.push(`<strong>${ele.getAttribute("text")}</strong>`)
);
console.log(text.join(" "));

关于javascript - 如何使用正则表达式和 javascript 在字符串中找到匹配的字符串?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57715256/

相关文章:

javascript - Fancybox 加载,但不包含任何图像,即使我很确定图像在正确的位置

python - 正则表达式查找 '\n'

regex - Perl - 正则表达式 - 第一个不匹配字符的位置

reactjs - 高阶组件类型问题

reactjs - WebStorm 中的 ESLint 配置错误

javascript - Webpack 配置不接受配置模式选项

javascript - 多行字符串在 JavaScript 上无法正确读取

javascript - Morris js 动态 ykeys

Javascript 安全问题/使用 eval()

java - (重新)使用 DateTimeFormatter 解析日期范围或将 DateTimeFormatter 与正则表达式混合