字符串的粗體部分

Question

在Javascript中加粗部分字符串的最佳方法是什么？

我有一個對象數組。 每個對象都有一個名稱。 還有一個輸入參數。

例如，如果您在輸入中寫入“sa”，它會自動在數組中搜索名稱包含“sa”字符串的對象。

當我打印所有名稱時，我想將與輸入文本一致的名稱部分加粗。

例如，如果我搜索“Ma”：

瑪麗亞
瑪麗亞
ETC...

我需要一個不使用 jQuery 的解決方案。 幫助表示贊賞。

PD：最后的字符串在

標簽。 我使用角度 ng-repeat 創建了一個列表。

這是代碼：

 $scope.users = data; for (var i = data.length - 1; i >= 0; i--) { data[i].name=data[i].name.replace($scope.modelCiudad,"<b>"+$scope.modelCiudad+"</b>"); };

ModelCiudad 是輸入文本內容變量。 數據是對象數組。

在此代碼中，如果例如 ModelCiudad 是“ma”，則每個結果

是：

 <b>Ma</b>ria

不是瑪麗亞

Answer 1

您可以使用 Javascript 的str.replace()方法，其中str等於您要搜索的所有文本。

var str = "Hello";
var substr = "el";
str.replace(substr, '<b>' + substr + '</b>');

以上只會替換substr的第一個實例。 如果要處理替換字符串中的多個子字符串，則必須使用帶有g修飾符的正則表達式。

function boldString(str, substr) {
  var strRegExp = new RegExp(substr, 'g');
  return str.replace(strRegExp, '<b>'+substr+'</b>');
}

在實踐中調用boldString看起來像：

boldString("Hello, can you help me?", "el"); 
// Returns: H<b>el</b>lo can you h<b>el</b>p me?

當通過瀏覽器呈現看起來像：H EL羅可你^ h EL p我嗎？

這是一個帶有示例的 JSFiddle： https ://jsfiddle.net/1rennp8r/3/

---

簡潔的 ES6 解決方案可能如下所示：

const boldString = (str, substr) => str.replace(RegExp(substr, 'g'), `<b>${substr}</b>`);

其中str是要修改的字符串， substr是要加粗的子字符串。

---

ES12 引入了一個新的字符串方法 str.replaceAll str.replaceAll()如果一次替換所有出現，則不需要正則表達式。 在這種情況下它的用法看起來像這樣：

const boldString = (str, substr) => str.replaceAll(substr, `<b>${substr}</b>`);

---

我應該提到的是，為了使后一種方法起作用，您的環境必須支持 ES6/ES12（或使用 Babel 之類的工具進行轉譯）。

另一個重要的注意事項是所有這些方法都區分大小寫。

Answer 2

這是一個保留原始大小寫的純 JS 解決方案（因此忽略查詢的大小寫）：

const boldQuery = (str, query) => {
    const n = str.toUpperCase();
    const q = query.toUpperCase();
    const x = n.indexOf(q);
    if (!q || x === -1) {
        return str; // bail early
    }
    const l = q.length;
    return str.substr(0, x) + '<b>' + str.substr(x, l) + '</b>' + str.substr(x + l);
}

測試：

boldQuery('Maria', 'mar'); // "<b>Mar</b>ia"
boldQuery('Almaria', 'Mar'); // "Al<b>mar</b>ia"

Answer 3

我今天遇到了類似的問題 - 除了我想匹配整個單詞而不是子字符串。 所以如果const text = 'The quick brown foxes jumped'和const word = 'foxes'比我想要的結果是'The quick brown <strong>foxes</strong> jumped' ； 但是，如果const word = 'fox' ，那么我預計不會有任何變化。

我最終做了類似於以下的事情：

const pattern = `(\\s|\\b)(${word})(\\s|\\b)`;
const regexp = new RegExp(pattern, 'ig'); // ignore case (optional) and match all
const replaceMask = `$1<strong>$2</strong>$3`;

return text.replace(regexp, replaceMask);

首先，我得到在一些空格或單詞邊界之前/之后的確切單詞，然后我用相同的空格（如果有）和單詞替換它，除了單詞被包裹在<strong>標簽中。

Answer 4

如果您想在 react/javascript 中的索引處設置單詞或單個字符的樣式，這是我想出的一個版本。

replaceAt( yourArrayOfIndexes, yourString/orArrayOfStrings ) 

工作示例： https : //codesandbox.io/s/ov7zxp9mjq

function replaceAt(indexArray, [...string]) {
    const replaceValue = i => string[i] = <b>{string[i]}</b>;
    indexArray.forEach(replaceValue);
    return string;
}

這是另一種替代方法

function replaceAt(indexArray, [...string]) {
    const startTag = '<b>';
    const endTag = '</b>';
    const tagLetter = i => string.splice(i, 1, startTag + string[i] + endTag);
    indexArray.forEach(tagLetter);
    return string.join('');
}

還有一個...

function replaceAt(indexArray, [...string]) {
    for (let i = 0; i < indexArray.length; i++) {
        string = Object.assign(string, {
          [indexArray[i]]: <b>{string[indexArray[i]]}</b>
        });
    }
    return string;
}

Answer 5

在Java語言中加粗字符串的最佳方法是什么？

我有一個對象數組。 每個對象都有一個名稱。 還有一個輸入參數。

例如，如果在輸入中輸入“ sa”，它將自動在數組中搜索以查找名稱包含“ sa”字符串的對象。

當我打印所有名稱時，我想將與輸入文本一致的名稱部分加粗。

例如，如果我搜索“ Ma”：

馬RIA
阿瑪RIA
等等...

我需要一個不使用jQuery的解決方案。 感謝您的幫助。

PD：最后的字符串在

標簽。 我使用angular ng-repeat創建一個列表。

這是代碼：

 $scope.users = data; for (var i = data.length - 1; i >= 0; i--) { data[i].name=data[i].name.replace($scope.modelCiudad,"<b>"+$scope.modelCiudad+"</b>"); };

ModelCiudad是輸入文本內容var。 數據是對象的數組。

在此代碼中，例如，如果ModelCiudad是“ ma”，則每個結果

是：

 <b>Ma</b>ria

沒有馬RIA

Answer 6

使用此處發布的答案（ https://stackoverflow.com/a/55241923/19535411 ）和此處（ https://stackoverflow.com/a/53213747/19535411 ），對於角度2+，我創建了一個管道並直接用於跨度。

管道代碼

並在這里使用：

html代碼

和這里：

TS代碼

並且工作了。