Question

为什么split函数没有保持分隔符不变的选项？

这是我的字符串：

story 01<div>lorem</div><div>lorem</div>

这是想要的结果：

STORY 01<div>lorem</div><div>lorem</div>

所以我只需要大写第一部分（放在第一个<div>标签之前）

这是我的方式：

let arr = string.split('<div>');
let title = arr[0].toUpperCase();
arr.shift();
newarr = [];
$.each(arr, function (i, val) {
    val = '<div>' + val;
    newarr.push(val);
});
let result = title + newarr;
console.log(result);

结果： STORY 01<div>lorem</div>,<div>lorem</div>

问题是comma和</div>之间的<div>

有帮助吗？

Answer 1

您可以使用正则表达式匹配<以外的任何内容，然后将匹配的子字符串大写：

const input = `story 01<div>lorem</div><div>lorem</div>`;
console.log(
  input.replace(/^[^<]+/, start => start.toUpperCase())
);

这假定匹配的字符串中不包含非标记<。如果这样做的话，它将变得更加复杂：

const input = `story< 01<div>lorem</div><div>lorem</div>`;
console.log(
  input.replace(/^((?!<[^<]+>).)+/, start => start.toUpperCase())
);

对于更复杂的事情，可能最好使用DOMParser或类似的东西而不是正则表达式，因为RE和非平凡的HTML通常不能很好地结合在一起。

Answer 2

我认为您可以在join之后使用split，

let str = "story 01<div>lorem</div><div>lorem</div>"

let spl = str.split("<div>");

if (spl && spl[0]) spl[0] = spl[0].toUpperCase();

let res = spl.join("<div>");

console.log(res)

Answer 3

您可以通过获取HTML的父元素内的第一个文本节点并将其内容设置为大写来实现此目的。为此，您可以使用contents()和filter()，如下所示：

$('.container').each(function() {
  var node = $(this).contents().filter(function() {
    return this.nodeType == 3 && this.nodeValue.trim();
  })[0];
  
  if (node)
    node.textContent = node.textContent.toUpperCase();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  story 01
  <div>lorem</div>
  <div>lorem</div>
</div>
<div class="container">
  story 02
  <div>lorem</div>
  <div>lorem</div>
</div>

与剖析HTML字符串本身相比，此方法的优势在于，不会因为更改HTML而被破坏。

所有这些都假定您不能直接修改HTML，因为到目前为止这是最好的解决方案。

Answer 4

只需在标题+较新的文本中使用 .join（''）：

let string = 'story 01<div>lorem</div><div>lorem</div>';
  let arr = string.split('<div>');
let title = arr[0].toUpperCase();
arr.shift();
newarr = [];
$.each(arr, function (i, val) {
    val = '<div>' + val;
    newarr.push(val);
});
let result = title + newarr;
console.log(result);

让结果=标题+ newarr.join（''）;

Answer 5

// Using DOMParser
const str = "story 01<div>lorem</div><div>lorem</div>";

const parser = new DOMParser();
const doc = parser.parseFromString(str, 'text/html');

const node = [...doc.body.childNodes].map((node) => {
    if(node.nodeType === 3) return node.textContent.toUpperCase();
    const nodeName = node.nodeName.toLowerCase();
    return '<' + nodeName + '>' + node.textContent + '</' + nodeName + '>';
}).join('');

console.log(node);

大写字符串的第一部分

5 个答案: