将字符串的第一部分大写

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

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

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

这里假设匹配的字符串不包含非标签<s。如果是这样，那就有点复杂了：

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

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

Answer 2

我认为你可以这样在split 之后使用join：

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 的父元素中的第一个文本节点并将其内容设置为大写来实现此目的。要使用 jQuery 执行此操作，您可以使用 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

只需在 title + newarr 中使用 .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);