Добавление двух внутренних HTML узлов без перевода строки между ними - PullRequest
Новая
       33

Добавление двух внутренних HTML узлов без перевода строки между ними

0 голосов
/ 21 апреля 2020

Я работаю с кодом hOCR, которым я пытаюсь манипулировать для достижения лучшего результата. Вот пример: 

<p class="ocr_par" id="op-4-1" title="bbox 105 218 1036 524" draggable="true" style="background-color: rgb(255, 255, 255);" lang="ita">
      <span class="ocrx_word" id="word_1_12" title="bbox 532 218 623 247; x_wconf 96">profonda</span>
      <span class="ocrx_word" id="word_1_13" title="bbox 630 218 705 240; x_wconf 96">riforma</span>
      <span class="ocrx_word" id="word_1_14" title="bbox 710 218 761 240; x_wconf 96">della</span>
      <span class="ocrx_word" id="word_1_15" title="bbox 766 218 845 242; x_wconf 96">Chiesa,</span>
      <span class="ocrx_word" id="word_1_16" title="bbox 850 218 887 240; x_wconf 93">che</span>
      <span class="ocrx_word" id="word_1_17" title="bbox 894 218 975 247; x_wconf 64">placasse</span>
      <span class="ocrx_word" id="word_1_18" title="bbox 982 218 1035 240; x_wconf 88">final-</span>   <----- last <span> with the dash ("-") to be removed
</p>
<p id="op-4-2" draggable="true" style="display: block;">
      <span class="ocrx_word" id="word_1_19" title="bbox 106 254 171 270; x_wconf 95">mente</span>
      <span class="ocrx_word" id="word_1_20" title="bbox 177 249 196 270; x_wconf 96">le</span>
      <span class="ocrx_word" id="word_1_21" title="bbox 202 254 282 277; x_wconf 94">proteste</span>
      <span class="ocrx_word" id="word_1_22" title="bbox 288 258 299 270; x_wconf 96">e</span>
      <span class="ocrx_word" id="word_1_23" title="bbox 306 249 325 270; x_wconf 96">lo</span>
      <span class="ocrx_word" id="word_1_24" title="bbox 332 254 431 270; x_wconf 95">scontento</span>
      <span class="ocrx_word" id="word_1_25" title="bbox 436 249 474 270; x_wconf 96">che</span>
      <span class="ocrx_word" id="word_1_26" title="bbox 480 251 495 270; x_wconf 93">si</span>
</p>

Мне нужно объединить два <p> с и включить все в один <p>, что я делал, заменив innerHTML первого на сумму оба innerHTML с.

В некоторых случаях слова разделяются между строками. Я пытаюсь заменить разделитель слов da sh -, который находится внутри последнего <span> , и удалить завершающий пробел после него.

При удалении da sh хорошо, я озадачен, когда дело доходит до устранения пробела.

Я полагаю, что исходит из того, как пробелы обрабатываются HTML, CSS и в DOM , и я, кажется, понимаю, что должен быть в состоянии получить результат с помощью поместив последние span из первых <p> в ту же строку с первым <span> из вторых <p> в результирующем html, но пока я не смог этого сделать. Любой указатель будет оценен.

Вот последняя пробная версия моего JS кода. p_s - это массив <p> s, к которому я пытаюсь присоединиться, например, два <p> s выше. 

new_p_innerH = ""
p_s.forEach(function (item, index) {
  // find if there's a word-splitting "-" to be eliminated at the end of the line
  s = item.textContent
  if (s.trim().charAt(s.trim().length-1) == "-") {
    iHtml = item.innerHTML
    dash = iHtml.lastIndexOf("-")  // get the position of the last "-"
    left_part = iHtml.slice(0, dash)
    right_part = iHtml.slice(dash + 1, iHtml.length)
    iHtml = left_part + right_part.replace(/[\r\n]+$/, '') // attempt to remove new lines at the end of the innerHTML -- not working
  } else {
    iHtml = item.innerHTML
  }
}
new_p_innerH += iHtml

Я знаю, что inner HTML не совсем рекомендуемый вариант, поэтому, пожалуйста, укажите альтернативы, если вы склонны. Как вы уже догадались, я не очень опытен.

...