Question

我有一个网页，主要由波斯语内容组成，在某些段落中，有一个单词或一些英文单词。内容是自动生成的，我无法从我的HTML源代码中更改它。我需要检测这些英文单词的位置，并给它们func finalExportCompletion(_ session: AVAssetExportSession) { PhotoManager().saveVideoToUserLibrary(fileUrl: session.outputURL!) { (success, error) in DispatchQueue.main.async{ if success { ProgressHUD.showSuccess("Video Saved", interaction: true) self.finalVideo = session.outputURL! //FileManager.default.clearTmpDirectory() self.clipsCollectionView.reloadData() } else { ProgressHUD.show(error?.localizedDescription) } //I don't know if you anyway want to go to "toPostVideoViewController" this you need to do it also in main thread self.performSegue(withIdentifier: "toPostVideoViewController", sender: nil) } } }前者的原因是我的英文字体 - 我没有选择并改变它是不可能的 - 看起来比我的波斯语更大字体，它必须是一些小于我分配给每个页面的波斯字体的字体大小的像素。这是一个例子：

font-size:xx;

这整个范围具有以下风格：

<span class="common">سلام دنیا (helo world)</span>

我无法为“hello world”部分指定不同的字体大小。

由于页面内容是通过从DB获取数据的脚本代码生成的，因此无法手动为英语单词提供任何嵌入式样式，例如用.common{ font-size:26px; font-family:'Arial'; }标记包围它们。有没有办法自动检测英语单词并给它们风格 - 通过分配一个类可能？ -

任何帮助的尝试都将受到高度赞赏。

Answer 1

您可以通过搜索英语字符序列来操纵DOM，并使用您自己的span包装这些序列。

这不是完整的解决方案，但您可以这样做：

document.querySelectorAll("span").forEach(function(el){
  el.innerHTML = el.innerText.replace(/[a-z]+/g, '<span class="uncommon">$&</span>');
});

.common{
    font-size:26px;
    font-family:'Arial'; 
}

.uncommon{
  font-size:36px;
  font-weight: 600;
}

<span class="common">سلام دنیا (helo world)</span>

Answer 2

上述答案有效。仅供进一步使用，我提供了这个想法的Angular版本。希望这将有助于将来。

.directive( 'showData', function ( $compile ) {
    return {
        scope: true,
        link: function ( scope, element, attrs ) {
            var el;
            var farsi = 0;

            attrs.$observe( 'template', function ( tpl )
            {
                //var tpl = attrs.template;
                //if ( angular.isDefined( tpl ) )
                {
                    // compile the provided template against the current scope
                    //now work on tpl:

                    function containASCII(str){
                        var flag_only_ascii = 1;
                        var flag_contain_ascii = 0;
                        for(var i=0;i<str.length;i++){

                            if(str.charCodeAt(i)<127){
                                flag_contain_ascii = 1;
                            }
                            else
                            {
                                flag_only_ascii = 0;
                            }
                        }

                        if(flag_only_ascii == 1 && flag_contain_ascii == 0)
                            return 1; //just ascii

                        if(flag_only_ascii == 0 && flag_contain_ascii ==1)
                        {
                            return 2;//combination
                        }

                        if(flag_only_ascii == 0 && flag_contain_ascii == 0){
                            return 0; //just english...
                        }

                        if(flag_only_ascii == 1 && flag_contain_ascii == 1){
                            return 3; //other
                        }


                    };

                    if(scope.TranslationValue == 1)
                    {
                        var split_span = tpl.split(" ");
                        for (i = 0 ; i < split_span.length ; i++)
                        {
                            var str_1 = split_span[i];
                            if(containASCII(str_1) == 3){
                                //if(str_1.search("<em2 ") == -1)
                                split_span[i] = "<em2 class='uncommon'>" + str_1 + "</em2>";
                            }
                        }

                        var final_str = split_span.join(" ");
                    }
                    else
                    {
                        final_str = tpl;
                    }


                    final_str = '<span rep-eng-text-font>' + final_str + '</span>';



                    element.html(final_str);

                    // add the template content

                }
            });
        }
    };
})

在HTML中处理多语言段落字体样式

2 个答案: