Skip to content

Commit

Permalink
Merge pull request #7 from zeng-hang/fix/fix-bug
Browse files Browse the repository at this point in the history 
fix: 修复对段落标签解析方式，针对内联元素翻译解析合并到父级 #5
  • Loading branch information
@wangrongding
wangrongding authored Dec 4, 2022
2 parents 8d598e5 + 4200d11 commit 45a1876
Show file tree
Hide file tree
Showing 2 changed files with 177 additions and 78 deletions.
181 changes: 113 additions & 68 deletions __test__.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,82 +10,127 @@
<body>
<div>
<h1>Test content</h1>
<h2>Please use dev-go to translate this page</h2>
<p>
our answer could be improved with additional supporting information. Please edit to add
further details, such as citations or documentation, so that others can confirm that your
answer is correct. You can find more information on how to write good answers in the help
center. – Community Bot
</p>

<div>
<h3>Test paragraph</h3>
This is a piece of test text, which will include some tags, such as
<a href="https://www.google.com">link</a>
、
<strong>strong</strong>
、
<em>em</em>
、
<del>del</del>
、
<ins>ins</ins>
、
<sub>sub</sub>
、
<sup>sup</sup>
、
<mark>mark</mark>
、
<small>small</small>
、
<big>big</big>
、
<u>u</u>
、
<s>s</s>
、
<q>q</q>
、
<cite>cite</cite>
、
<abbr>abbr</abbr>
、
<dfn>dfn</dfn>
、
<time>time</time>
、
<var>var</var>
、
<samp>samp</samp>
、
<kbd>kbd</kbd>
、
<i>i</i>
、
<b>b</b>
、
<span>span</span>
The expectation is that these tags will not be understood as a node alone, but together with
the parent node.

<br />

But for block-level elements, it will be understood as a separate node, such as
<div>
this is a
<b>div</b>
element
</div>
<p>
our answer could be improved with additional supporting information. Please edit to add
further details, such as citations or documentation, so that others can confirm that your
answer is correct. You can find more information on how to write good answers in the help
center. – Community Bot
this is a
<b>p</b>
element
</p>
</div>
</div>
<h1>this is a h1 element</h1>
<ul>
<li>this is a li element</li>
</ul>
<dl>
<dt>this is a dt element</dt>
<dd>this is a dd element</dd>
</dl>

<div>
<h3>Test list and link</h3>
<ul>
<li>
You can find more information on
<a href="">test link</a>
how to write good answers in the help center
</li>
<li>
You can find more information on
<a href="">test link</a>
how to write good answers in the help center
</li>
</ul>
</div>
<br />

<div>
<h3>Test code</h3>
<pre>
<code>
const test = 'test';
console.log(test);
</code>
<code>
const a = 123;
function test (){
let b=333;
}
</code>
</pre>
</div>
There are also some special tags, such as
<b>br</b>
,
<b>hr</b>
should also be understood as a sign of the end of a paragraph. here is a br tag:
<br />
here is a hr tag:
<hr />
They will both be understood as the end of a paragraph.
</div>

<div>
<ul>
<li>
<a href="">our answer could be improved with additional supporting information.</a>
</li>

<div>
<h3>Test table</h3>
<table>
<thead>
<tr>
<th>Test</th>
<th>Test</th>
<th>Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
<li>
<a href="">our answer could be improved with additional supporting information.</a>
</li>
<li>
<a href="">our answer could be improved with additional supporting information.</a>
</li>
<li>
<a href="">our answer could be improved with additional supporting information.</a>
</li>
</ul>
</div>
<!-- <script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{ pageLanguage: 'en' },
'google_translate_element',
)
}
</script>
<script
type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
></script> -->
</div>

</body>
</html>
<!-- <script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{ pageLanguage: 'en' },
'google_translate_element',
)
}
</script>
<script
type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
></script> -->
74 changes: 64 additions & 10 deletions src/contents/translate.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,22 +72,76 @@ const filterTagsFn = (tag) => {
function loopTransNode(element) {
// 当子元素为空时，中断
if (element.childNodes.length === 0) return

// 获取所有的子节点
const childrenList = Array.from(element?.childNodes, filterTagsFn)
const childrenList = Array.from(element?.childNodes, filterTagsFn).filter((item) => item)

// 存储需要翻译的文本
let translateText = ''
let lastElement: HTMLElement = null

// 遍历所有的子节点, 需要翻译的元素
childrenList.forEach((tag) => {
// 如果是文本节点，且不为空时，发送翻译请求
if (tag?.nodeType === 3 && tag.textContent.trim() !== '') {
// 如果文本中全是中文或空，不翻译
if (!tag.textContent || /^[\u4e00-\u9fa5]+$/.test(tag.textContent)) return
// 发送翻译请求
chrome.runtime.sendMessage({ text: tag.textContent, type: 'translate' }, (res) => {
insertTransResult(tag, res.text)
})
if (hasTransTextNode(tag)) {
// 不需要翻译的元素
if (!hasTranslate(tag.textContent)) return

// 拼接需要翻译的文本
translateText += tag.textContent
lastElement = tag
} else {
tag && loopTransNode(tag)
// 进入到这里证明一个段落已经结束，开始翻译
sentenceTrans(translateText, lastElement)
translateText = ''
lastElement = null

// 递归处理非内联元素或者文本节点
loopTransNode(tag)
}
})

// 最后一个段落的翻译
sentenceTrans(translateText, lastElement)
}

// 判断节点是否是段落
function hasTransTextNode(element: HTMLElement) {
if (element == null) return false

// 如果是文本节点，直接返回
if (element.nodeType === 3) {
return true
}

// 换行元素过滤掉
const lineBreakList = ['BR', 'HR']
if (lineBreakList.includes(element.tagName)) {
return false
}

// display 属性为 inline/inline-block 的元素是符合条件的
const { display } = window.getComputedStyle(element)
if (display === 'inline' || display === 'inline-block') {
return true
}

return false
}

// 判断是否需要翻译，只检测中文
function hasTranslate(str: string) {
if (!str) return false

return !/[\u4e00-\u9fa5]/.test(str)
}

// 发送翻译请求
function sentenceTrans(text: string, insetBefore: HTMLElement) {
if (text.trim() === '') return

chrome.runtime.sendMessage({ text: text.replace(/[\r\n]/g, ''), type: 'translate' }, (res) => {
insertTransResult(insetBefore, res.text)
})
}

// 段落对比翻译
Expand Down

0 comments on commit 45a1876

Please sign in to comment.