程序问答   发布时间:2022-06-01  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了包含 HTML 标记的字符串标题大小写的正则表达式问题大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决包含 HTML 标记的字符串标题大小写的正则表达式问题?

开发过程中遇到包含 HTML 标记的字符串标题大小写的正则表达式问题的问题如何解决?下面主要结合日常开发的经验,给出你关于包含 HTML 标记的字符串标题大小写的正则表达式问题的解决方法建议,希望对你解决包含 HTML 标记的字符串标题大小写的正则表达式问题有所启发或帮助;

目前我正在运行以下替换方法......

const str = '<span style="Font-weight:bold;color:Blue;">ch</span>edilpakkam,tiruvallur';
const rex = (/(\b[a-z])/g);
 
const result = str.tolowerCase().replace(rex,function (letter) {
  //console.log(letter.toupperCase())
  return letter.toupperCase();
});

console.log(result);
.as-console-wrapper { min-height: 100%!important; top: 0; }

... 带有...的来源

<span style="Font-weight:bold;color:Blue;">ch</span>edilpakkam,tiruvallur

...以及以下结果...

<Span Style="Font-Weight:Bold;color:Blue;">Ch</Span>Edilpakkam,Tiruvallur

但是我想要实现的是以下几点......

  1. 将跨度绑定到字符串。
  2. 大写的第一个字母和后面的单词。
  3. 预期输出
<span style="Font-weight:bold;color:Blue;">Ch</span>edilpakkam,Tiruvallur

解决方法

Toto already commented on the difficulties of "parsing" HTML code via regex。

以下通用(标记不可知)方法利用了沙盒,例如 div 元素,以便从其 DOM 解析/访问功能中受益。

首先,需要收集临时沙箱的所有文本节点。然后,对于每个文本节点的 textContent,必须决定是否从字符串开头的所有单词开始大写。

capitalizing every word within a String including the first occurring one 的情况是 ...

  • 文本节点的上一个兄弟要么不存在......
  • ... 或者是 block-level element。
  • 文本节点本身以空格(-sequence)开头。

对于所有其他情况,我们也希望捕获/大写单词边界后的每个第一个单词字符 ... except for the word at the beginning of a line

function collectContentTextNodesRecursively(list,nodE) {
  return list.concat(
    (node.nodeType === 1) // element-node?

    ? Array
      .from(node.childNodes)
      .reduce(collectContentTextNodesRecursively,[])

    : (node.nodeType === 3) // text-node?
      ? node
      : []
  );
}

function getNodeSpecificWordCapitalizingRegex(textNodE) {
  const prevNode = textNode.previousSibling;
  const isAssumeBlockBefore = (prevNode === null) || (/^(?:address|article|aside|blockquote|details|dialog|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h1|h2|h3|h4|h5|h6|header|hgroup|hr|li|main|nav|ol|p|pre|section|table|ul)$/g).test(prevNode.nodename.toLowerCase());

  //     either assume a previous block element,or the current text starts with whitespace.
  return (isAssumeBlockBefore || (/^\s+/).test(textNode.textContent))

    // capture every first word character after word boundary.
    ? (/\b(\w)/g)
    // capture every first word character after word boundary except at beginning of line.
    : (/(?<!^)\b(\w)/g);
}


function capitalizeEachTextContentWordWithinCode(codE) {
  const sandbox = document.createElement('div');
  sandbox.innerHTML = code;

  collectContentTextNodesRecursively([],sandboX).forEach(textNode => {

    textNode.textContent = textNode.textContent.replace(
      getNodeSpecificWordCapitalizingRegex(textNodE),(match,capturE) => capture.toUpperCase()
    ); 
  });
  return sandbox.innerHTML; 
}


const htmlCode = [
  '<span style="font-weight:bold;color:blue;">ch</span>edilpakkam,tiruvallur,chedilpakkam,tiruvallur','<span style="font-weight:bold;color:blue;">ch</span> edilpakkam,'<span style="font-weight:bold;color:blue;">ch</span>edilpakkam,].join('<br\/>');

document.body.innerHTML = capitalizeEachTextContentWordWithinCode(htmlCodE);

console.log(document.body.innerHTMl.split('<br>'));
.as-console-wrapper { max-height: 57%!important; }

,

试试下面的

checkThis

function formatText(str) {
  var res = str.replace(/(\b[a-z])/gi,function(match,$1){
   return $1.toUpperCase();
  }).replace(/^([a-z]{2})(.*)/gim,"<span style='font-weight:bold;color:Blue;'>$1</span>$2");
 return res;
}

大佬总结

以上是大佬教程为你收集整理的包含 HTML 标记的字符串标题大小写的正则表达式问题全部内容,希望文章能够帮你解决包含 HTML 标记的字符串标题大小写的正则表达式问题所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:包含