百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程文章 > 正文

PHP和前端必看功能 - 文章提取关键词替为超链接,SEO叫内链生成

qiyuwang 2024-10-15 14:49 11 浏览 0 评论

前沿

很多大网站的文章内容关键词都是可以添加链接的,包括我们的大头条也是可以的,这样的好处首先是方便客户点击跳转相关内容,其次SEO叫内链,对SEO也有一定的辅助作用,如果一篇文章3000字,一个个加内链太麻烦了,那么我们如果把一篇文章中的关键词提取出来,自动加上链接呢?

首先我们使用PHP来实现

因为php主要开发后端功能,一般的网站管理系统,都会存在这样的一个需求,下面是代码

//外链数组
$link = [
 'IT学堂,http://www.toutiao.com/',
 'IT技术实战,http://www.toutiao.com/',
 '互联网资讯,http://www.toutiao.com/',
 '视频干货,http://www.toutiao.com/'
];

//要替换的内容
$str = 'IT学堂 - 提供最新的前后端IT技术实战,IT教程内容和经验、互联网资讯,关注IT学堂,学习大量干货,文字干货、视频干货应有尽有,就等你了!';

//执行替换
$out = keylink($str,$link);
echo $out;

//替换函数
function keylink($str, $link){
 $linkMap = [];
 foreach($link as $row) {
 $linkMap[] = explode(',', $row);
 }
 $tmpKwds = [];
 foreach($linkMap as $i => $row) {
 //把文字替换成链接
 $str = preg_replace('/('.$row[0].')/', '<a href="'.$row[1].'" target="_blank">'.$row[0].'</a>', $str);
 }
 return $str;
}

代码截图,方便大家看:

预览效果:

我们使用JS来实现下需求

如果我们的后端程序员说你们前端处理,我给你接口,那你是不是懵了,心里一万个草泥马,为啥要我处理,那么下面我们用js方法处理下:

<script>
//定义内容
var str = 'IT学堂 - 提供最新的前后端IT技术实战,IT教程内容和经验、互联网资讯,关注IT学堂,学习大量干货,文字干货、视频干货应有尽有,就等你了!';

//外链数组
var link = [
'IT学堂,http://www.toutiao.com/',
'IT技术实战,http://www.toutiao.com/',
 '互联网资讯,http://www.toutiao.com/',
'视频干货,http://www.toutiao.com/'
];
 
//执行替换
document.write(keylink(str,link))
 
//替换函数
function keylink(str,link){
 for(let j = 0; j < link.length; j++) {
 let row = link[j].split(',');
 str = str.replace(eval('/'+row[0]+'/g'),'<a href="'+row[1]+'" target="_blank">'+row[0]+'</a>');
 }
 return str;
}
</script>

代码截图,方便大家看:

预览效果:

注意:js这块有点要注意的,就是动态变量正则,这里使用邪恶的eval函数,当然也有其他方法。

结尾

点击 @IT学堂 关注我们,每天学习新鲜干货哦,人只要活着,那么就得养成活到老,学到老,好好学习天天向上!

相关推荐

你们想要的Python爬虫教程来了:从原理到实践

概述:网络世界的智能采集者Python爬虫是通过自动化程序模拟人类浏览网页行为的技术工具,其核心价值在于高效获取并解析网络数据。得益于Python丰富的第三方库(如requests、Beautiful...

你需要知道的 19 个 console 实用调试技巧

大家好,我是Echa。之前给大家介绍了《...

CSS布局必备技能

Flex是一种用于布局的CSS属性,它使得在容器中的子元素能够灵活地伸缩和排列,从而实现更加自适应和响应式的布局。使用Flex布局可以轻松地创建各种复杂的布局,而无需使用复杂的CSS或者...

我是如何使用ChatGPT和CoPilot作为编码助手的

...

jsoup Selector类学习笔记,快速提升你的HTML处理能力!

Selector类是jsoup库中的一个核心类,用于通过CSS选择器语法来查找HTML文档中的元素。选择器语法通用选择器*:匹配任何元素。标签选择器tag:匹配指定标签名的元素。...

CSS伪类选择器大全:提升网页交互与样式的神奇工具

CSS伪类选择器是前端开发中不可或缺的强大工具,它们允许我们根据元素的状态、位置或用户行为动态地应用样式。本文将全面介绍常用的伪类选择器,并通过代码示例展示其实际应用场景。一、基础交互伪类1.超链接...

简析JS中Document与CSS

如果你是一名前端人员,你单单的使用jq插件显然不够,js在大多时候比较搁置,但你如果前端技术想要提升,那么js的精通对你显得很重要,本文只是他到js的document与css。1.Document与E...

网页世界隐藏的神秘代码语言,竟能这样改变布局

CSS基础:选择器与属性CSS(CascadingStyleSheets)是用于控制网页外观的一门样式表语言。它通过定义HTML元素的显示方式来增强网页的表现力。CSS的选择器允许开发者精确地定位...

Thymeleaf 语法全面详解(史上最全)

Thymeleaf是一个现代化的服务器端Java模板引擎,支持HTML、XML、JavaScript、CSS甚至纯文本。以下是Thymeleaf语法的全面详解,包含所有属性和复杂用法。...

零基础学习HTML之CSS篇内联内部外部样式表和类型选择符

CSS简介CSS(CascadingStyleSheets)层叠样式表。CSS能做些什么?1.使用CSS样式可以有效地对页面进行布局。2.使用CSS样式可以对页面字体、颜色、背景和其他效果实现...

css 设置盒子阴影,阴影和背景图保持一致

预览图首先查看预览图:原理采用了background属性...

CSS中的定位(postion)详解

定义CSSposition属性用于指定一个元素在文档中的定位方式。top,right,bottom和left属性则决定了该元素的最终位置,z-index属性则决定了该元素所在的层级。定位类型1...

CSS selector 小知识学习分享

在设计器中,大家拾取网页元素后,在右侧的属性栏里都会有一个叫“查找路径”的选择框,一般也很少有人用到,打开后里面显示了一堆‘@#yen#%#yen@*T&’的玩意,那么这个“查找路径”到底是个什...

从网站检查中复制CSS代码的最简单方法

在处理网站项目时,您是否曾经对使用开发工具感到沮丧?必须在您正在处理的网页和检查器之间来回切换以查看CSS并进行调整通常可能是一个挑战。值得庆幸的是,有一个浏览器扩展程序可以简化该过程:CSSSca...

XPath 选择器

上篇《Selenium入门(基于Python)...

取消回复欢迎 发表评论: