任何标签添加样式,将要匹配的标签和要添加的样式作为函数的参数传递进去。以下是一个通用函数示例:
//处理后端返回的带标签(span)的字符添加样式属性。
/*
*参数说明:
*inputString:String类型 比如:添加了两个新的参数<span> tagName </span> 和 style,分别表示要匹配的标签名称和要添加的样式。函数会根据这些参数动态地创建一个<span>正则表达式</span>,并将匹配的标签替换为带有指定样式的新标
* tagName:标签 比如:span、text
* style:样式 比如:'color: #FF0000'
*/
function addStyleToTag(inputString, tagName, style) {
// 使用正则表达式匹配tagName标签
const regex = new RegExp(`<${tagName}>(.*?)<\/${tagName}>`, 'g');
let match;
let outputString = inputString;
while ((match = regex.exec(inputString)) !== null) {
// 获取标签内的内容
const tagContent = match[1];
// 添加样式
const replacedTag = `<${tagName} style='${style}'>${tagContent}</${tagName}>`;
// 替换原来的标签
outputString = outputString.replace(match[0], replacedTag);
}
return outputString;
}
// 测试函数
const content = "添加了<span>两<span>个新的参数<span> tagName </span> 和 style,分别表示要匹配的标签名称和要添加的样式。函数会根据这些参数动态地创建一个<span>正则表达式</span>,并将匹配的标签替换为带有指定样式的新标";
const formattedContent = addStyleToTag(content, 'span', 'color: red');
console.log("替换后的内容是:", formattedContent);
替换后的内容是: 添加了<span style='color: red'>两<span>个新的参数<span> tagName </span> 和 style,分别表示要匹配的标签名称和要添加的样式。函数会根据这些参数动态地创建一个<span style='color: red'>正则表达式</span>,并将匹配的标签替换为带有指定样式的新标;
(在vue中需要展示的样式可以这样写:<div class="particulars-text" v-html="content"></div>)
在这个函数中,我添加了两个新的参数 tagName 和 style,分别表示要匹配的标签名称和要添加的样式。函数会根据这些参数动态地创建一个正则表达式,并将匹配的标签替换为带有指定样式的新标签。这样,我们就可以传递任何标签和样式给函数,并将其应用到字符串中了。