как выделить текст в строке? - PullRequest
Новая
       5

как выделить текст в строке?

2 голосов
/ 24 апреля 2019

У меня есть такая строка "Здравствуйте, я ищу / # работу в качестве учителя # /". Все в этом / # ---- # / должно быть выделено.

Вот что я делаю: 

highlightMessage(message) {
    if (message.match(/\/#\s*|\s*#\//g)) {
      console.log(message.replace(/\/#\s*|\s*#\//g, `<span className='yellow'>$1</span>`))
    }
  }

но мой вывод: 

Hello , I'm looking for <span className='yellow'>$1</span>job as a teacher<span className='yellow'>$1</span>

Где я делаю ошибку?

Ответы [ 2 ]

2 голосов
/ 24 апреля 2019

Используйте (.*?), чтобы создать группу, которая сопоставляет что-либо без жадности между хешами, затем передайте функцию стрелки в качестве второго аргумента для доступа к сопоставленной группе и верните значение, чтобы заменить ее.Доступ к группе можно получить во втором аргументе этой функции стрелки: 

function highlight(message) {
  return message.replace(/\/#\s*(.*?)\s*#\//g,
    (_, g) => `<span className='yellow'>${g}</span>`);
}

Вы даже можете передать функцию замены в качестве аргумента, чтобы настроить замену при необходимости.

Вот примерс несколькими заменами в одной строке: 

function highlight(message, replacer = s => `<span class="bold">${s}</span>`) {
  return message.replace(/\/#\s*(.*?)\s*#\//g, (_, g) => replacer(g));
}
  
document.body.innerHTML += highlight("Hello , /#I'm#/ looking for /# job as a teacher #/");
document.body.innerHTML += highlight("<br>Nothing to replace here");
document.body.innerHTML += highlight("<br>You can pass a custom /#replacer function #/ too", s => '?' + s.toUpperCase() + '?');
.bold {
  font-weight: bold;
  font-size: 20px;
}
0 голосов
/ 24 апреля 2019

Вы можете использовать регулярное выражение \/#(.*)#\/, чтобы получить все в пределах /# #/ для группы захвата и replace с оберткой <span>. 

function highlightMessage(message) {
  if (/\/#.*#\//g.test(message)) {
    document.body.innerHTML += message.replace(/\/#(.*)#\//g, `<span class='red'>$1</span>`)
  }
}

highlightMessage("Hello , I'm looking for /# job as a teacher #/")
.red { color: red }
<body></body>

(class используется вместо className в демонстрационных целях)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...