正则表达式提取字符串的前 10 个字符

Question

有两种情况

第一种情况：

例如，我有一个 html 字符串，

 var str1="<b>hello how are you</b><h1>how to extract the first 10 characters of a htmlstring without losing the html of the string</h1>";

我必须在不丢失 html 的情况下提取字符串的前 10 个字符。所以预期的输出是

<b>hello how a<b>...

第二种情况：

我有一个简单的字符串如下

var str1="hello how are you.how to extract the first 10 characters of a htmlstring without losing the html of the string";

我必须提取字符串的前 10 个字符。所以预期的输出是

hello how a...

我想要一个适用于这两种情况的正则表达式。

我是正则表达式的新手。我尝试了很多，但我没有任何工作代码，所以我可以在这里发布它。请帮助。

Answer 1

根据your rephrased question;

Regexp 不是处理 html 的好工具。

正确的方法是解析 DOM。 Jack 举了一个例子，但假设您要保留的标记是您正在查看的节点的第一个子节点。

我上面链接的问题表明情况并非如此。然而，杰克的解决方案可以适应任意嵌套。我通过简单地计算节点的字符直到到达断点来做到这一点。然后递归地修改最终节点。最后，我删除了在找到所需字符数之后出现的所有节点。

function getNodeWithNChars(capture,node)
{
  var len=node.childNodes.length;
  var i=0;
  var toRemove=[];
  for(;i<len;i++)
  {
     if (capture===0)
     {
       toRemove.push(node.childNodes[i]);
     }
    else if (node.childNodes[i].textContent.length<capture)
    {
       capture=capture-node.childNodes[i].textContent.length;
    }
    else
    {
      if(node.childNodes[i].childNodes.length===0)
      {
        node.childNodes[i].textContent=node.childNodes[i].textContent.substring(0,capture);
        capture=0;
      }
      else
      {
        node.childNodes[i]=getNodeWithNChars(capture,node.childNodes[i]);
        capture=0;
      }
    }
  }
  i=0;
  for(;i<toRemove.length;i++)
  {
    node.removeChild(toRemove[i]);
  }
  return node;
}

function getNChars(n,str)
{
  var node = document.createElement('div');
  node.innerHTML = str;
  node=getNodeWithNChars(n,node);
  return node.innerHTML;
}

上述函数的调用示例；

console.log(getNChars(25,"hello how are <b>you</b> <em>how <b>to extract the</b> first 25 characters of a htmlstring without losing the html of the string</em>"));

Answer 2

试试这个：

var str1="<b>hello how are you</b></h1>how to extract the first 10 characters of a htmlstring without losing the html of the string</h1>";
var res = str1.replace(/<(.*?\>)(.{11}).*/, '<$1$2</$1');
console.log(res);

Answer 3

这个怎么样：

regex = /(<[a-z0-9]+>|)([a-z0-9 ]{0,10})[a-z0-9 ]*(<\/[a-z0-9]+>|).*/

str1 = "hello how are you.how to extract the first 10 characters of a htmlstring without losing the html of the string"
console.log(str1.replace(regex, '$1$2$3'))

str1 = "<b>hello how are you</b><h1>how to extract the first 10 characters of a htmlstring without losing the html of the string</h1>"
console.log(str1.replace(regex, '$1$2$3'))