Javascript：特定字符前的粗体字符串

Question

我有一个Javascript代码，可以将整个字符串变为粗体，但是，我想修改代码，只将“：”前面的字符串部分特别加粗

我目前拥有的代码是：

function changeBrandName() 
{
  var prodList = document.querySelectorAll("h1.ProductList-title");
  for (i = 0, len = prodList.length; i < len; i++) 
  {
    var store = prodList[i].indexOf(":");

    for (j = 0; j < store; j++)
    {
      prodList[i].charAt[j].style.fontWeight = 'bold';
    } 
  }
}

以这种方式应用fontWeight目前不起作用-请提供建议。

完整的字符串是“Vifa：鹅卵石灰奥斯陆扬声器”-我希望“Vifa”用粗体。

Answer 1

使用纯JavaScript，您必须迭代查询的元素，获取它们的innerHTML，转换html，然后将其设置回原位。

为了转换超文本标记语言，我使用indexOf查找冒号，然后片将字符串分成两部分。然后，我使用模板字符串和重构字符串。

const prodList = document.querySelectorAll('.ProductList-title');

Array.from(prodList).forEach(elem => {
  const text = elem.innerHTML;
  const idx = text.indexOf(':');
  if (idx >= 0) {
    elem.innerHTML = `<b>${text.slice(0, idx)}</b>${text.slice(idx)}`;
  }
});

h1 {
  font-weight: normal;
}

<h1 class="ProductList-title">Prod 1: blabla</h1>
<h1 class="ProductList-title">Prod 2: blabla</h1>
<h1 class="ProductList-title">Prod 3: blabla</h1>
<h1 class="ProductList-title">Prod 4 no colon blabla</h1>

Answer 2

必须有一个更简单的解决方案，通过拆分，等等。但为了清晰起见，这里有一种方法

<h1 class="ProductList-title" style="font-weight: 100;">Vifa: Pebble Grey Oslo Loudspeaker</h1>

<script>
    function changeBrandName() {
        var prodList = document.querySelectorAll("h1.ProductList-title");
        for (var i = 0; i < prodList.length; i++) {
            var text = prodList[i].innerText;
            var index = text.indexOf(':');
            var lower = text.substring(0, index);
            var higher = text.substring(index + 1);
            prodList[i].innerHTML = '<b>' + lower + '</b>:' + higher;
        }
    }
    changeBrandName();
</script>

Answer 3

使用好的简单的老式Javascript：

let h1s = document.querySelectorAll('.ProductList-title');

btn.addEventListener('click', function(event) {
  for (const h1 of h1s) { 
    let [brand, text] = h1.textContent.split(':');
    h1.innerHTML = `<b>${brand}</b>: ${text}`
  }
  this.parentElement.removeChild(this);
})

h1 { font-weight: normal; }

<h1 class="ProductList-title">Porsche: Cayenne</h1>
<h1 class="ProductList-title">BMW: i8</h1>
<button id="btn" type="button">Click to self-destruct</button>