굵은 문자열 부분

굵은 문자열 부분

자바스크립트에서 문자열의 일부를 굵은 글씨로 표시하는 가장 좋은 방법은 무엇입니까?

저는 여러 가지 물건을 가지고 있습니다.각 개체에는 이름이 있습니다.입력 파라미터도 있습니다.

예를 들어 입력에 "sa"를 쓰면 배열에서 자동으로 "sa" 문자열이 포함된 이름의 개체를 검색합니다.

모든 이름을 인쇄할 때 입력 텍스트와 일치하는 이름 부분을 굵은 글씨로 표시하고 싶습니다.

예를 들어 "Ma"를 검색하면 다음과 같습니다.

마리아
아마리아
등..

jQuery를 사용하지 않는 솔루션이 필요합니다.도움은 감사히 받겠습니다.

마지막 줄은 여기에 있습니다.

tag. 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입니다.그리고 데이터는 객체들의 배열입니다.

예를 들어 모델 Ciudad가 각각의 결과 "ma"인 경우 이 코드에서

다음과 같습니다.

<b>Ma</b>ria

마리아가 아닌

str.replace()method, wherestr검색하려는 모든 텍스트와 동일합니다.

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?

브라우저를 통해 렌더링될 때 다음과 같은 모양이 나타납니다.여보세요, 도와주시겠습니까?

다음은 JSFiddle 예입니다. https://jsfiddle.net/1rennp8r/3/

---

간결한 ES6 솔루션은 다음과 같습니다.

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

에.str입니다.substr굵은 부분 문자열입니다.

---

, 새로운 ES12, str.replaceAll()이것은 모든 발생을 한 번에 대체할 경우 regex가 필요하지 않습니다.다와 가 될 것입니다.

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

---

이러한 후자의 접근 방식이 작동하려면 환경에서 ES6/ES12를 지원해야 합니다(또는 Babel과 같은 도구를 사용하여 전치).

또 다른 중요한 점은 이러한 접근 방식은 모두 대소문자를 구분한다는 것입니다.

원래의 경우를 보존하는 순수한 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"

저는 오늘도 비슷한 문제에 부딪쳤습니다. 다만, 서브스트링이 아닌 전체 단어를 일치시키고 싶었다는 점을 제외하고는 말이죠.그래서 만약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);

먼저 어떤 공백이나 단어 경계의 앞뒤에 있는 정확한 단어를 얻은 다음 단어를 같은 공백(있는 경우)과 단어로 대체합니다. 단, 단어가 a로 랩핑되어 있는 경우는 제외합니다.<strong>꼬리표를 매다

단어나 개별 문자를 반응/자바스크립트의 인덱스로 스타일을 지정하고 싶다면 여기 제가 생각해낸 버전이 있습니다.

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;
}

위의 솔루션은 훌륭하지만 제한적입니다!문자열에서 대소문자를 구분하지 않는 쿼리를 일치시키고 여러 개의 일치가 될 수 있는 테스트 시나리오를 상상해 보십시오.

예를들면

쿼리: ma

스트링: 어메이징 스파이더맨

예상 결과:어메이징 스파이더맨

위 시나리오의 경우 다음을 사용합니다.

const boldMatchText = (text,searchInput) => {
let str = text.toLowerCase();
const query = searchInput.toLowerCase();
let result = "";
let queryLoc = str.indexOf(query);

if (queryLoc === -1) {
  result += text;
} else
  do {
    result += ` ${text.substr(0, queryLoc)}
    <b>${text.substr(queryLoc, query.length)}</b>`;
    str = str.substr(queryLoc + query.length, str.length);
    text = text.substr(queryLoc + query.length, str.length);
    queryLoc = str.indexOf(query);
  } while (text.length > 0 && queryLoc !== -1);

return result + text;


};

언급URL : https://stackoverflow.com/questions/29896907/bold-part-of-string